<template>
  <view class="tabbar" @click="clickItem">
    <tabbar-item
      v-for="(name, i) of titles"
      :key="i"
      :data-i="i"
      :name="name"
      class="tabbar_item"
      :style="{ color: currentIdx === i ? activeColor : '' }"
    ></tabbar-item>
    <view class="border_bottom" :style="[borderBottomStyle]"></view>
  </view>
</template>

<script>
import TabbarItem from '@/components/tabbar/tabbarItem'

export default {
  props: {
    // 标题列表
    titles: {
      type: Array,
      default() {
        return []
      },
    },

    // 被选中的标题颜色
    activeColor: {
      type: String,
      default: '#000000',
    },

    // 被选中的标题的下边线宽度，单位rpx
    lineWidth: {
      type: Number,
      default: 100,
    },

    // 动画的时间，单位毫秒
    duration: {
      type: Number,
      default: 300,
    },
  },

  components: {
    TabbarItem,
  },

  mounted() {
    this.getTabbarWidth()
  },

  data() {
    return {
      currentIdx: 0,
      // 导航栏父元素的宽度
      tabbarWidth: 0,
    }
  },

  methods: {
    clickItem(e) {
      const { i } = e.target.dataset
      if (typeof i === 'number') {
        this.currentIdx = i
        this.$emit('currentIdx', i)
      }
    },
    // 获取tabbar的宽度
    getTabbarWidth() {
      let info = uni.createSelectorQuery().in(this).select('.tabbar')
      info
        .boundingClientRect(({ width }) => {
          // drp为2，将获取的px转换成rpx
          this.tabbarWidth = Math.floor(width * 2)
        })
        .exec()
    },
  },

  computed: {
    // 被选中的标题颜色
    color() {
      return this.currentIdx === this.activeColor
    },
    // 获取每个标题的长度
    titleLength() {
      return this.tabbarWidth / this.titles.length
    },
    // 被选中的标题的导航条样式
    borderBottomStyle() {
      return {
        // 宽度
        width: this.lineWidth + 'rpx',
        // 动画
        transform: `translateX(${
          this.currentIdx * this.titleLength + this.titleLength / 2
        }rpx);`,
        // 调整下边线与标题文字居中
        left: this.lineWidth / -2 + 'rpx',
        transitionDuration: this.duration + 'ms',
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.tabbar {
  height: 50px;
  border-bottom: 2rpx solid #ccc;
  display: flex;
  position: relative;

  .tabbar_item {
    flex: 1;
  }

  .border_bottom {
    position: absolute;
    height: 10rpx;
    border-radius: 6rpx;
    background-color: $theme;
    bottom: 8rpx;
  }
}
</style>